<template>
	<view>
		<view class="mains">
			
		
		<Top v-model="value"></Top>
		
		
		<view class="like">
			<view class="like-tit">
				猜你喜欢的
			</view>
			<view class="like-item" v-for="v in list" :key="v.id">
				<image class="item-left" :src="v.imgs"></image>
				<view class="item-right">
					<view class="right-tit">
						{{v.name}}
					</view>
					<view class="right-p">
						{{v.type+"/" + v.point + '/' +v.range}}
					</view>
					<view class="right-che">
						<view class="che-tit" v-for="(i,index) in v.tabs" :key="index">
							{{i}}
						</view>
					</view>
					<view class="right-pric">
						{{v.price.toLocaleString()}}元/平
					</view>
				</view>
			</view>
		</view>
		
		</view>
	</view>
</template>

<script>
	import Top from "@/components/Top/Top.vue"
	import {list, search} from "@/api/user.js"
	export default {
		data() {
			return {
				value:"",
				list:[]
			};
		},
		comments:{Top},
		//监听数据发送请求
		watch:{
			value(a){
				console.log(a);
				if(a){
				this.seach()
				}
			}
		},
		//下拉的生命周期
		onReachBottom() {
			// console.log("66666");
			this.seach()
		
		},
		methods:{
			async seach(){
				let res = await search({searchkey:this.value})

				//数据可封装渲染
				res.data.forEach(i => {
					// console.log(i);
					i.tabs = JSON.parse(i.tabs.replace(/'/g, '"'))
					this.list.push(i)
				})
				console.log(res.data);

			}
		}
	}
</script>

<style lang="scss">

.mains{
	width: 660rpx;
	margin: 0 auto;

//猜你喜欢
		.like {
		width: 100%;
			.like-tit {
				font-size: 40rpx;
				font-weight: bolder;
				padding: 40rpx 0;
			}

			.like-item {
				display: flex;
				height: 200rpx;
				margin-top: 40rpx;

				image {
					width: 100%;
					height: 100%
				}

				.item-left {
					width: 200rpx;

				}

				.item-right {
					// vertical-align: text-top;
					line-height: 1;
					// border: 1px solid red;
					flex: 1;
					padding-left: 40rpx;

					.right-tit {
						font-weight: bolder;
						font-size: 40rpx;
					}

					.right-p {
						padding: 16rpx 0;
					}

					.right-che {
						padding-bottom: 16rpx;
						display: flex;
						justify-items: self-start;
						
						.che-tit {
							font-size: 16rpx;
							// border: 1px solid red;
							background: #edf0f3;
							padding: 4rpx;
							margin-right:12rpx;
							// margin-left: 10rpx;
						}
					}
				}
			}
		}

}
</style>
